{% extends "base.html" %}

{% block title %}疫情防控系统-摄像头管理{% endblock %}

{% block content %}
<div id="app" class="card">
  <div class="card-header">
    <h3 class="card-title">摄像头详情</h3>
  </div>
  <!-- /.card-header -->
  <div class="card-body">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th style="width: 180px">ID（点击进入详情）</th>
                <th>ipv4</th>
                <th>摄像头地点</th>
                <th>摄像头状态</th>
                <th style='width: 300px'>已经检测到的人数</th>
                <th style="width: 80px">总占比</th>
            </tr>
        </thead>
        <tbody id="my_tbody">
        </tbody>
    </table>
  </div>
  <!-- /.card-body -->
  <!-- 分页 -->
  <div class="card-footer clearfix">
    <ul class="pagination pagination-sm m-0 float-right">
        {% if camera_list|length > max_display_page %}
            {% for i in range(max_display_page) %}
                <li class="page-item"><a class="page-link" href="javascript:get_data({{ i }});">{{ i + 1 }}</a></li>
            {% endfor %}
            <li class="page-item"><a class="page-link" href="#">...</a></li>
            <li class="page-item"><a class="page-link" href="javascript:get_data({{ i }});">{{ camera_list|length }}</a></li>
        {% else %}
{#            <li class="page-item"><a class="page-link" href="#">&laquo;</a></li>#}
            {% for i in range(0, camera_list|length, page_size) %}
                <li class="page-item"><a class="page-link" href="javascript:get_data({{ i }});">{{ i + 1 }}</a></li>
            {% endfor %}
{#            <li class="page-item"><a class="page-link" href="#">&raquo;</a></li>#}
        {% endif %}
    </ul>
  </div>
</div>
<!-- /.card -->
{% endblock %}

{% block script %}
<script>
    var page_index = 0;
    var page_size = {{ page_size }};
    var max_page = {{ max_display_page }};
    function get_data(value) {
        console.log(value);
        page_index = value;
        $.post(
            "/camera/get_data",
            {
                "page_index": page_index,
                "page_size": page_size
            },
            function (data, state) {
                console.log(data);
                var str = ""
                for(var i = 0; i < data.length; i++){
                    str+=
                    "<tr>\
                        <td><a href='/camera_form?id_camera="+data[i].id+"'>"+data[i].id+"</a></td>\
                        <td>"+data[i].ipv4+"</td>\
                        <td>"+data[i].place+"</td>\
                        <td>"+data[i].state+"</td>\
                        <td>\
                            <span>"+data[i].number+"</span>\
                            <div class='progress progress-xs'>\
                              <div class='progress-bar progress-bar-danger' style='width: "+data[i].number_in100+"%'></div>\
                            </div>\
                        </td>\
                        <td><span class='badge bg-danger'>"+data[i].proportion+"%</span></td>\
                    </tr>";
                }
                document.getElementById("my_tbody").innerHTML=str;
            }
        );
    }
    get_data(page_index);
</script>
{% endblock %}
